<template>
  <v-main class="full-height">
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              修改手机号
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0">
            <v-btn icon @click="commit" class="mr-n3">
              <v-icon color="primary" size="30">mdi-check</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container class="mt-15">
      <v-row justify="center" class="mt-5">
        <v-col cols="12" class="">
          <v-text-field class="py-0"
                        ref="phone0"
                        placeholder="请输入11位手机号"
                        :rules="[rules.required,rules.phone]"
                        v-model="changePhoneData.phone"
                        prefix="+86"
                        @blur="changePhoneForm.phoneOK=rules.phone(changePhoneData.phone)===true"
          ></v-text-field>
        </v-col>
        <v-col cols="12" class="py-0">
          <v-text-field class="py-0"
                        ref="verifyCode0"
                        placeholder="请输入验证码"
                        :rules="[rules.required,rules.verifyCode]"
                        v-model="changePhoneData.verifyCode"
          >
            <template v-slot:append>
              <v-chip small disabled v-if="fetchCode">
                <v-progress-circular
                    size="15"
                    width="2"
                    indeterminate
                ></v-progress-circular>
              </v-chip>
              <v-chip small :disabled="!changePhoneForm.phoneOK" @click="doGetVerifyCode" v-else>
                获取验证码
              </v-chip>

            </template>
          </v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-main>
</template>

<script>
import {rules, simpleCopy} from "../util/util";

export default {
  name: "ChangePhone",
  data: () => ({
    changePhoneData: {
      phone: '',
      verifyCode: '',
      uid:''
    },
    changePhoneForm: {
      phoneOK: false,
    },
    rules: rules,
    fetchCode:false
  }),
  methods: {
    doGetVerifyCode() {
      this.fetchCode = true
      let data = {
        phone: this.changePhoneData.phone
      }
      this.$http.post("user/getVerifyCode", data, {}).then(res => {
        this.$emit('toast', `【妆典】验证码是 ${res.data}，请妥善保管不要泄露。`, 5000)
        this.changePhoneData.verifyCode = res.data
        this.fetchCode = false
        this.changePhoneForm.phoneOK = false
      }).catch(res => {
        this.fetchCode = false
        this.$emit('toast', res.msg)
      })
      // this.data[0].verifyCode=''
    },
    commit() {
      if (!(this.$refs['phone0'].validate(true) && this.$refs['verifyCode0'])) {
        return
      }

      let data = this.changePhoneData
      this.$http.post('user/changeInfo',data).then(res=>{
        this.$emit('toast','修改成功')
        this.$store.commit('init',res.data)
      }).catch(res=>{
        this.$emit('toast',res.msg)
      })
    },

  },
  mounted() {
    simpleCopy(this.$store.state,this.changePhoneData)
  }
}
</script>

<style scoped>

</style>
